<template>
    <div>
        <ComponentBasicExampleAlert />
        <page-main title="日期和时间点" class="demo">
            <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" />
        </page-main>
        <page-main title="日期和时间范围" class="demo">
            <el-date-picker v-model="value2" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        </page-main>
        <page-main title="默认的起始与结束时刻" class="demo">
            <div>起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</div>
            <el-date-picker v-model="value3" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]" />
        </page-main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value1: '',
            value2: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value3: ''
        }
    }
}
</script>
